vsl 通用扩展
更新时间：2021-11-18
通过 iovauto-vsl 绑定 bindcommon 回调 获取对应语音命令
属性说明：
| 属性名 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
| bindcommon | function | 否 | 无 | 宿主语音回调函数 |
bindcommon 回调参数说明：
| 参数 | 类型 | 说明 |
|---|---|---|
| next | string | 下一首 |
| previous | string | 上一首 |
| play | string | 播放 |
| pause | string | 暂停 |
| stop | string | 停止 |
使用
<iovauto-vsl bindcommon="audioChange"></iovauto-vsl> audioChange(e) {
switch (e.msg) {
case 'next':
// 下一首
break;
case 'previous':
// 上一首
break;
case 'play':
// 播放
break;
case 'pause':
// 暂停
break;
case 'stop':
// 停止
break;
default:
break;
}
},使用示例
swan.createInnerAudioContext 使用示例
swan:
<iovauto-vsl bindcommon="audioChange">
<view class="wrap">
<view class="card-area">
<iov-button text="play" bindtap="play"></iov-button>
<iov-button text="pause" bindtap="pause"></iov-button>
<iov-button text="stop" bindtap="stop"></iov-button>
<iov-button text="seek" bindtap="seek"></iov-button>
<iov-button text="destroy" bindtap="destroy"></iov-button>
<iov-button text="prev" bindtap="prev"></iov-button>
<iov-button text="next" bindtap="next"></iov-button>
</view>
</view>
</iovauto-vsl>json:
{
"usingComponents": {
"iov-button": "iov-ui/lib/button"
}
}js:
/**
* @file demo api for createInnerAudioContext
* @author swan
*/
/* globals Page, swan *
/* eslint-disable */
Page({
/* eslint-enable */
data: {
audiolist: [
{
poster: 'https://b.bdstatic.com/searchbox/icms/searchbox/img/xuezhiqian.jpg',
name: '演员1',
author: '薛之谦1',
src: 'https://b.bdstatic.com/miniapp/images/yanyuan.mp3'
},
{
poster: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/7fbf26a0-4f4a-11eb-b680-7980c8a877b8.png',
name: '致爱丽丝',
author: '暂无',
src: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3'
},
{
poster: 'https://b.bdstatic.com/searchbox/icms/searchbox/img/xuezhiqian.jpg',
name: '演员3',
author: '薛之谦3',
src: 'https://b.bdstatic.com/miniapp/images/yanyuan.mp3'
},
{
poster: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/7fbf26a0-4f4a-11eb-b680-7980c8a877b8.png',
name: '致爱丽丝',
author: '暂无',
src: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3'
}
],
audioindex: 1,
audio: {}
},
onLoad() {
// 每次触发就会注册一次回调事件，所以只需把所有回调写在onLoad中即可
const innerAudioContext = swan.createInnerAudioContext();
innerAudioContext.src = this.data.audiolist[this.data.audioindex].src;
innerAudioContext.autoplay = true;
innerAudioContext.onPlay(res => {
swan.showToast({
title: '音频播放',
icon: 'none'
});
console.log('onPlay', res);
});
innerAudioContext.onCanplay(res => {
swan.showToast({
title: '音频进入可播放状态',
icon: 'none'
});
console.log('onCanplay', res);
});
innerAudioContext.onPause(res => {
swan.showToast({
title: '音频暂停',
icon: 'none'
});
console.log('onPause', res);
});
innerAudioContext.onStop(res => {
swan.showToast({
title: '音频停止',
icon: 'none'
});
console.log('onStop', res);
});
innerAudioContext.onEnded(res => {
swan.showToast({
title: '音频自然播放结束',
icon: 'none'
});
console.log('onEnded', res);
});
innerAudioContext.onTimeUpdate(res => {
console.log('onTimeUpdate', res);
});
innerAudioContext.onError(err => {
swan.showModal({
title: '音频播放错误',
content: JSON.stringify(err)
});
console.log('onError', err);
});
innerAudioContext.onWaiting(res => {
swan.showToast({
title: '音频加载中......',
icon: 'none'
});
console.log('onWaiting', res);
});
innerAudioContext.onWaiting(res => {
swan.showToast({
title: '音频加载中......',
icon: 'none'
});
console.log('onWaiting', res);
});
this.innerAudioContext = innerAudioContext;
},
audioChange(e) {
swan.showModal({
title: 'audio-msg',
content: JSON.stringify(e.msg)
});
switch (e.msg) {
case 'next':
this.next();
break;
case 'previous':
this.prev();
break;
case 'play':
this.play();
break;
case 'pause':
this.pause();
break;
case 'stop':
this.stop();
break;
default:
break;
}
},
play() {
this.innerAudioContext.play();
},
pause() {
this.innerAudioContext.pause();
},
stop() {
this.innerAudioContext.stop();
},
seek() {
this.innerAudioContext.seek(120);
swan.showToast({
title: '跳转到音频120s处',
icon: 'none'
});
},
destroy() {
this.innerAudioContext.destroy();
swan.showToast({
title: '音频销毁，需要重新触发创建时期',
icon: 'none'
});
},
offTimeUpdate() {
this.innerAudioContext.offTimeUpdate(res => {
swan.showToast({
title: 'offTimeUpdate',
icon: 'none'
});
console.log('offTimeUpdate', res);
});
},
prev(e) {
let {audioindex, audiolist} = this.data;
audioindex = audioindex <= 0 ? 4 : audioindex - 1;
this.innerAudioContext.src = audiolist[audioindex].src;
this.setData({
audioindex
});
},
next(e) {
let {audioindex, audiolist} = this.data;
audioindex = audioindex >= 4 ? 0 : audioindex + 1;
this.innerAudioContext.src = audiolist[audioindex].src;
this.setData({
audioindex
});
}
});audio 音频使用示例
swan:
<iovauto-vsl bindcommon="audioChange">
<audio
poster="{{ audio.poster }}"
name="{{ audio.name }}"
loop="false"
author="{{ audio.author }}"
src="{{ audio.src }}"
id="myAudio"
controls
binderror="audioError"
bindplay="audioPlay"
bindpause="audioPause"
bindtimeupdate="audioTimeUpdate"
bindended="audioEnded"
></audio>
</iovauto-vsl>
<view class="audioBox">
<iov-button text="prev" bindtap="audioprev"></iov-button>
<iov-button text="next" bindtap="audionext"></iov-button>
</view>json:
{
"usingComponents": {
"iov-button": "iov-ui/lib/button"
}
}js:
Page({
data: {
audiolist: [
{
poster: 'https://b.bdstatic.com/searchbox/icms/searchbox/img/xuezhiqian.jpg',
name: '演员1',
author: '薛之谦1',
src: 'https://b.bdstatic.com/miniapp/images/yanyuan.mp3'
},
{
poster: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/7fbf26a0-4f4a-11eb-b680-7980c8a877b8.png',
name: '致爱丽丝',
author: '暂无',
src: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3'
},
{
poster: 'https://b.bdstatic.com/searchbox/icms/searchbox/img/xuezhiqian.jpg',
name: '演员3',
author: '薛之谦3',
src: 'https://b.bdstatic.com/miniapp/images/yanyuan.mp3'
},
{
poster: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/7fbf26a0-4f4a-11eb-b680-7980c8a877b8.png',
name: '致爱丽丝',
author: '暂无',
src: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3'
}
],
audioindex: 1,
audio: {}
},
onLoad() {
this.setData({
audio: this.data.audiolist[this.data.audioindex]
});
},
audioChange(e) {
swan.showModal({
title: 'audio-msg',
content: JSON.stringify(e.msg)
});
switch (e.msg) {
case 'next':
this.audionext();
break;
case 'previous':
this.audioprev();
break;
case 'play':
this.audioPlay();
break;
case 'pause':
this.audioPause();
break;
case 'stop':
break;
default:
break;
}
},
audioprev(e) {
let {audioindex, audiolist} = this.data;
audioindex = audioindex <= 0 ? 4 : audioindex - 1;
this.setData({
audioindex,
audio: audiolist[audioindex]
});
},
audionext(e) {
let {audioindex, audiolist} = this.data;
audioindex = audioindex >= 4 ? 0 : audioindex + 1;
this.setData({
audioindex,
audio: audiolist[audioindex]
});
},
audioError(e) {
console.log('audio ', e.type);
swan.showToast({
title: '加载音频资源出错',
duration: 1000,
icon: 'none'
});
},
audioPlay(e) {
console.log('audio', e);
swan.showToast({
title: '音频开始播放',
duration: 1000,
icon: 'none'
});
},
audioPause(e) {
console.log('audio ', e.type);
swan.showToast({
title: '音频暂停',
duration: 1000,
icon: 'none'
});
},
audioEnded(e) {
console.log('audio ', e.type);
swan.showToast({
title: '音频播放完',
duration: 1000,
icon: 'none'
});
},
audioTimeUpdate(e) {
console.log('audio ', e.type);
}
});